<template>
  <view class="container">
    <NavBar title="视频详情" />
    <view class="video_page">
      <video
        id="myVideo"
        v-if="videoSrc"
        :src="videoSrc"
        objectFit="cover"
        page-gesture
        show-mute-btn
        vslide-gesture
        vslide-gesture-in-fullscreen
        :title="videoInfo.title + '—第' + isActiveIndex + '节'"
        controls
      ></video>
    </view>

    <view class="collect">
      <button
        type="primary"
        style="
          width: 700rpx;
          height: 80rpx !important;
          font-size: 30rpx;
          background: #e86565;
        "
        @click="cancelSearch"
      >
        取消收藏
      </button>
    </view>
  </view>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import {
  apiDelCollection, // 9 取消收藏
} from "@/net/educationalLearning.js";

export default {
  components: {
    NavBar,
  },
  data() {
    return {
      Iscollection: false,
      imgSrc: "",
      videoSrc: "", //地址
      isActiveIndex: 1,
      videoInfo: {},
    };
  },

  onLoad(options) {
    this.videoInfo = JSON.parse(options.item);
    this.videoSrc = JSON.parse(this.videoInfo.url)[0];
  },

  methods: {
    // 取消搜藏
    cancelSearch() {
      apiDelCollection(this.videoInfo.collectId)
        .then((res) => {
          if (res.code === 0) {
            uni.showToast({
              title: "取消成功",
              icon: "success",
              mask: true,
              duration: 1500,
            });
            uni.navigateBack({
              delta: 1,
            });
          } else {
            uni.showToast({
              title: "取消失败",
              icon: "error",
              mask: true,
              duration: 1500,
            });
          }
        })
        .catch((err) => {
          console.log(err);
          uni.showToast({
            title: "取消失败",
            icon: "error",
            mask: true,
            duration: 1500,
          });
        });
    },
  },
};
</script>

<style>
page {
  background: #f9f9f9;
  height: 100vh;
  overflow: hidden;
}

.container {
  height: 100vh;
  position: relative;
}

#myVideo {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  width: 100%;
  height: 486rpx;
}

.choose_num {
  display: flex;
}

.choose_num .video_i {
  width: 80rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background: #edeef0;
  border-radius: 8px;
  margin-right: 20rpx;
}

.choose_num .video_i text {
  font-size: 28rpx;
  font-weight: bold;
  color: #000000;
}

.active {
  background: #b6ccea !important;
}

.collect {
  position: fixed;
  bottom: 0;
  width: 750rpx;
  height: 120rpx;
  background: #ffffff;
  border-top: 2rpx solid #e0e4ea;
}

.collect {
  display: flex;
  justify-content: space-between;
  padding: 24rpx;
  box-sizing: border-box;
}

.collect_left {
  display: flex;
  align-items: center;
}

.icon-shoucang,
.icon-xingxing1 {
  font-size: 30rpx;
  margin-right: 16rpx;
}

.icon-xingxing1:before {
  color: #f2cb51;
}

.collect_right {
}
</style>
